<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CKEditor 5 – Classic editor</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="ckeditor.js"></script>
	<script src="translations/zh-cn.js"></script>
	
</head>
<body>
    <h1>Classic editor</h1>
    <textarea name="content" id="editor">
        <p>This is some sample content.</p>
    </textarea>
    <script>

	//案例 https://www.jianshu.com/p/47e25447b771
	//  上传适配器，格式官网上有，以一种Promise 的方式。Promise好像是有阻塞的意思在里面。
	class UploadAdapter {
		constructor(loader) {
			this.loader = loader;
		}
		upload() {
			return new Promise((resolve, reject) => {
				const data = new FormData();
				data.append('upload', this.loader.file);
				data.append('allowSize', 10);//允许图片上传的大小/兆
				$.ajax({
					url: 'loadImage',
					type: 'POST',
					data: data,
					dataType: 'json',
					processData: false,
					contentType: false,
					success: function (data) {
						if (data.res) {
							resolve({
								default: data.url
							});
						} else {
							reject(data.msg);
						}

					}
				});
			   
			});
		}
		abort() {
		}
	}

		var editor;
		ClassicEditor
			.create( document.querySelector( '#editor' ), {
				language: 'zh-cn',
				/*
				ckfinder: {
					uploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json'
				}
				*/
				
			} )
			 .then( newEditor => {
				console.log( newEditor );
				editor = newEditor;
				// 这个地方加载了适配器
				newEditor.plugins.get('FileRepository').createUploadAdapter = (loader)=>{
					return new UploadAdapter(loader);
				};

			} )
            .catch( error => {
                console.error( error );
            } );

			
			setTimeout(function(){
				editorData = editor.getData();
				console.log( editorData );
				editor.setData( '<p>Some textddddddd.</p>' );
			}, 1000);

    </script>
</body>
</html>